<template>
    <div>
        <!-- 中间内容 -->
        <div class="all-main">
            <div class="main">
                <!-- 中间左边内容 -->
                <div class="main-left">
                    <div class="mainpic">
                        <img src="../assets/videosecond.png" alt="" />
                    </div>
                    <div class="mainnum">
                        <p>{{ infodata.videoAllCount }}</p>
                        <span>昨日下载视频</span>
                    </div>
                    <!-- 垂直线 -->
                    <div class="line">
                        <img src="../assets/line.svg" alt="" />
                    </div>
                    <!-- 素材区 -->
                    <div class="source">
                        <div class="num">
                            <div class="top">
                                <span>{{
                                
                                        infodata.statisticalVideoVos[2].count
                                            ? infodata.statisticalVideoVos[2].count
                                            : 0
                                }}</span>
                                <img src="../assets/topsecond.png" alt="" />
                                <p class="pic">素材区</p>
                            </div>
                            <div class="top">
                                <span>{{
                                
                                        infodata.statisticalVideoVos[1].count
                                            ? infodata.statisticalVideoVos[1].count
                                            : 0
                                }}</span>
                                <img src="../assets/topsecond.png" alt="" />
                                <p class="pic">成片区</p>
                            </div>
                            <div class="top">
                                <span>{{
                                
                                        infodata.statisticalVideoVos[0].count
                                            ? infodata.statisticalVideoVos[0].count
                                            : 0
                                }}</span>
                                <img src="../assets/topsecond.png" alt="" />
                                <p class="pic">案例区</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main-left">
                    <div class="mainpic">
                        <img style="width: 68px; height: 68px" src="../assets/tupiandawnload.png" alt="" />
                    </div>
                    <div class="mainnum">
                        <p style="color: #ffa54b">{{ infodata.pictureAllCount }}</p>
                        <span>昨日下载图片</span>
                    </div>
                    <!-- 垂直线 -->
                    <div class="line">
                        <img src="../assets/line.svg" alt="" />
                    </div>
                    <!-- 素材区 -->
                    <div class="source">
                        <div class="num">
                            <div class="top">
                                <span>{{
                                
                                        infodata.statisticalPictureVos[2].count
                                            ? infodata.statisticalPictureVos[2].count
                                            : 0
                                }}</span>
                                <img src="../assets/topsecond.png" alt="" />
                                <p class="pic">素材区</p>
                            </div>
                            <div class="top">
                                <span>{{
                                
                                        infodata.statisticalPictureVos[1].count
                                            ? infodata.statisticalPictureVos[1].count
                                            : 0
                                }}</span>
                                <img src="../assets/topsecond.png" alt="" />
                                <p class="pic">成品区</p>
                            </div>
                            <div class="top">
                                <span>{{
                                
                                        infodata.statisticalPictureVos[0].count
                                            ? infodata.statisticalPictureVos[0].count
                                            : 0
                                }}</span>
                                <img src="../assets/topsecond.png" alt="" />
                                <p class="pic">案例区</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 统计表 -->
            <div class="allconut">
                <div class="allconut-content">
                    <!-- 左边内容 -->
                    <div class="allconut-left">
                        <!-- 数据统计 -->
                        <!-- 数据统计区域 -->
                        <div class="flex">
                            <img style="width: 20px; height: 20px; margin-right: 10px" src="../assets/shuju.png"
                                alt="" />
                            <div style="height: 20px; line-height: 20px">下载量统计</div>
                        </div>
                        <div class="left-top">
                            <div class="flex jc-sb">
                                <div class="left-btn">
                                    <div v-for="(item, index) in videoList" :key="index"
                                        :class="{ istask: task == index }" @click="choosevideoPage(index)">
                                        <span class="asff">{{ item.name }}</span>
                                    </div>
                                </div>
                                <!-- X月新增任务数据 -->
                                <!-- <div class="newMouth">
                <p>{{ date.split("-")[1] }}月新增数据</p>
              </div> -->
                                <div class="block">
                                    <span class="demonstration"></span>
                                    <el-date-picker v-model="date" type="month" :clearable="false" placeholder="选择月"
                                        value-format="yyyy-MM" @change="changemonth">
                                    </el-date-picker>
                                </div>
                            </div>

                            <!-- 统计表 -->
                            <div class="Statisticaltable">
                                <div class="charts">
                                    <div v-show="task == 0" id="myChartvideo"
                                        style="width: 100%; height: calc(100vh - 442px)" ref="myChartvideo"></div>
                                    <div v-show="task == 1" style="width: 100%; height: calc(100vh - 442px)"
                                        ref="myChartimg"></div>
                                    <div v-show="task == 2" style="width: 100%; height: calc(100vh - 442px)"
                                        ref="myCharttask"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 右边内容 -->
                    <div class="all-point-right">
                        <img src="../assets/paihang.png" class="paihang" alt="" />
                        <p>下载量排行榜</p>
                        <div class="point-title">
                            <!-- 左边姓名 -->
                            <div class="left-name">
                                <h4>名次</h4>
                            </div>
                            <!-- 中间姓名 -->
                            <div>
                                <h4>姓名</h4>
                            </div>
                            <!-- 右边积分 -->
                            <div class="right-point">
                                <h4>下载量</h4>
                            </div>
                        </div>
                        <div class="title-top">
                            <div class="right-title">
                                <ul class="eri infinite-list" v-infinite-scroll="load"
                                    infinite-scroll-disabled="disabled" :infinite-scroll-distance="10"
                                    style="overflow: auto">
                                    <li v-for="(item, index) in scoreRanking" :key="item.id"
                                        class="flex infinite-list-item">
                                        <div>
                                            <img v-if="item.imgSrc" :src="item.imgSrc" alt="" />
                                            <span v-else style="margin-left: 6px">{{
                                                    index + 1
                                            }}</span>
                                            <span class="sort">{{ item.sort }}</span>
                                            <span class="name">{{ item.account }}</span>
                                        </div>
                                        <span class="name name2">{{ item.downloadNum }}</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- <div class="Order-more">
              <el-button
                type="primary"
                @click="openFullScreen1"
                v-loading.fullscreen.lock="fullscreenLoading"
              >
                查看更多
              </el-button>
            </div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
// 引入echarts
import {
    homemonthdownload,
    adminhomepage,
    homeyesterdaydownload,
} from "@/api/index";
export default {
    data() {
        return {
            fullscreenLoading: false,
            isActive: 0,
            home: 0,
            // 任务页面总积分排行榜
            scoreRanking: [],
            task: 0,
            index: 0,
            videoPage: 1,
            // 视频 任务
            videoList: [
                {
                    name: "视频",
                },
                {
                    name: "图片",
                },
            ],
            options: [
                {
                    value: "选项5",
                    label: "1月",
                },
                {
                    value: "选项6",
                    label: "2月",
                },
                {
                    value: "选项7",
                    label: "3月",
                },
                {
                    value: "选项8",
                    label: "4月",
                },
                {
                    value: "选项9",
                    label: "5月",
                },
                {
                    value: "选项10",
                    label: "6月",
                },
                {
                    value: "选项11",
                    label: "7月",
                },
                {
                    value: "选项12",
                    label: "8月",
                },
                {
                    value: "选项1",
                    label: "9月",
                },
                {
                    value: "选项2",
                    label: "10月",
                },
                {
                    value: "选项3",
                    label: "11月",
                },
                {
                    value: "选项4",
                    label: "12月",
                },

                {
                    value: "选项13",
                    label: "选择,默认显示当前月份的数据",
                },
            ],
            value: "",
            value2: "",
            date: "",
            objectType: 1,
            type: "",
            pageNo: 0,
            pageSize: 15,
            infodata: {
                statisticalVideoVos: [
                    {
                        count: "",
                    },
                    {
                        count: "",
                    },
                    {
                        count: "",
                    },
                ],
                statisticalPictureVos: [
                    {
                        count: "",
                    },
                    {
                        count: "",
                    },
                    {
                        count: "",
                    },
                ],
                statisticalTaskVos: [
                    {
                        count: "",
                    },
                    {
                        count: "",
                    },
                ],
            },
            loading: false,
            total: "",
        };
    },

    created() {
        let year = new Date().getFullYear();
        let month = new Date().getMonth() + 1;
        if (month < 10) {
            month = "0" + month;
        }
        this.date = year + "-" + month;
        this.adminhomepage();
        this.homeyesterdaydownload();
        // this.homemonthdownload();
    },
    mounted() {
        // document
        //   .querySelector("body")
        //   .setAttribute("style", "background-color:#f2f2f2;");
        setTimeout(() => {
            this.initmyChartvideo();
        }, 500);

        // this.initChartssecond();
    },
    beforeDestroy() {
        // document.querySelector("body").removeAttribute("style");
    },
    computed: {
        noMore() {
            return this.scoreRanking.length >= this.total;
        },
        disabled() {
            return this.loading || this.noMore;
        },
    },
    methods: {
        homeyesterdaydownload() {
            homeyesterdaydownload().then((res) => {
                res.data.statisticalVideoVos.map(item => {
                    if (item.partitionId == 2) {
                        this.infodata.statisticalVideoVos[0].count = item.count
                    } else if (item.partitionId == 3) {
                        this.infodata.statisticalVideoVos[1].count = item.count
                    } else if (item.partitionId == 4) {
                        this.infodata.statisticalVideoVos[2].count = item.count
                    }
                })
                res.data.statisticalPictureVos.map(item => {
                    if (item.partitionId == 2) {
                        this.infodata.statisticalPictureVos[0].count = item.count
                    } else if (item.partitionId == 3) {
                        this.infodata.statisticalPictureVos[1].count = item.count
                    } else if (item.partitionId == 4) {
                        this.infodata.statisticalPictureVos[2].count = item.count
                    }
                })
                this.infodata.videoAllCount = res.data.videoAllCount
                this.infodata.pictureAllCount = res.data.pictureAllCount
                this.infodata.taskAllCount = res.data.taskAllCount || 0
            });
        },

        load() {
            this.adminhomepage();
        },
        adminhomepage() {
            this.loading = true;
            this.pageNo++;
            adminhomepage({
                pageNo: this.pageNo,
                pageSize: this.pageSize,
            })
                .then((res) => {
                    this.loading = false;
                    this.scoreRanking = [...this.scoreRanking, ...res.data.list];
                    this.scoreRanking[0].imgSrc = require("../assets/one.png");
                    this.scoreRanking[1].imgSrc = require("../assets/two.png");
                    this.scoreRanking[2].imgSrc = require("../assets/three.png");
                    this.total = res.data.total;
                })
                .catch((res) => { });
        },
        changemonth() {
            if (this.task == 0) {
                this.initmyChartvideo();
            } else if (this.task == 1) {
                this.initmyChartimg();
            } else {
                this.initmyCharttask();
            }
        },
        // homemonthdownload() {
        //   homemonthdownload({
        //     date: this.date,
        //     objectType: this.objectType,
        //     type: this.type,
        //   }).then((res) => {

        //   });
        // },
        // 点击跳转选择页面
        choosePage(index) {
            this.isActive = index;
            this.home = index;
        }, // this.isActive = index;
        // },
        // 点击查看更多
        openFullScreen1() {
            this.pageNo++;
            this.fullscreenLoading = true;
            this.adminhomepage();
        },

        choosevideoPage(index) {
            this.task = index;
            if (this.task == 0) {
                this.objectType = 1;
                this.initmyChartvideo();
            } else if (this.task == 1) {
                this.objectType = 3;
                this.initmyChartimg();
            } else {
                this.objectType = 2;
                this.initmyCharttask();
            }
            // this.videoPage = index;
        },

        //echarts  内容
        initChartssecond() {
            let myChartsecond = this.$echarts.init(this.$refs.chartsecond);
            var optionsecond;
            // console.log(this.$refs.chartsecond); // 绘制图表
            optionsecond = {
                title: {},
                legend: {
                    top: "bottom",
                    //  data: ['Range', 'Average']
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985",
                        },
                    },
                },

                legend: {
                    data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
                },

                legend: {
                    top: "bottom",
                },
                toolbox: {
                    show: false,
                    feature: {
                        dataZoom: {
                            yAxisIndex: "none",
                        },
                        restore: {},
                        saveAsImage: {},
                    },
                },

                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        data: ["10-1", "10-2", "10-3", "10-4", "10-5", "10-6", "10-7"],
                    },
                ],

                yAxis: [
                    {
                        type: "value",
                        boundaryGap: [0, "100%"],
                        axisLabel: {
                            formatter: "{value} 单",
                        },
                    },
                ],

                dataZoom: [
                    {
                        type: "inside",
                        start: 0,
                        end: 20,
                    },
                    {
                        start: 0,
                        end: 20,
                    },
                ],
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                // legend: {
                //   top: "bottom",
                //   //  data: ['Range', 'Average']
                // },
                series: [
                    {
                        name: "素材区",
                        type: "line",
                        stack: "Total",
                        smooth: true,
                        areaStyle: {},
                        emphasis: {
                            focus: "series",
                        },
                        data: [18, 15, 14, 11, 13, 12, 30, 17],
                    },
                    {
                        name: "成片区",
                        type: "line",
                        stack: "Total",
                        smooth: true,
                        areaStyle: {},
                        emphasis: {
                            focus: "series",
                        },
                        data: [15, 17, 18, 16, 15, 16, 18],
                    },
                    {
                        name: "案例区",
                        type: "line",
                        stack: "Total",
                        smooth: true,
                        areaStyle: {},
                        emphasis: {
                            focus: "series",
                        },
                        data: [11, 16, 14, 12, 14, 15, 14],
                    },
                ],
            };
            optionsecond && myChartsecond.setOption(optionsecond);
        },
        initmyChartvideo() {
            homemonthdownload({
                date: this.date,
                objectType: this.objectType,
                type: this.type,
            }).then((res) => {
                let day = 0;
                if (this.date) {
                    if (this.date.split("-")[1].slice(0, 1) == "0") {
                        day = new Date(
                            this.date.split("-")[0],
                            this.date
                                .split("-")[1]
                                .substr(this.date.split("-")[1].length - 1, 1),
                            0
                        ).getDate();
                    } else {
                        day = new Date(
                            this.date.split("-")[0],
                            this.date.split("-")[1],
                            0
                        ).getDate();
                    }
                }
                let sourcedatalist = [];
                for (let i = 1; i <= day; i++) {
                    if (i < 10) {
                        sourcedatalist.push({
                            product: this.date + "-0" + i,
                            案例区: 0,
                            成品区: 0,
                            素材区: 0,
                        });
                    } else {
                        sourcedatalist.push({
                            product: this.date + "-" + i,
                            案例区: 0,
                            成品区: 0,
                            素材区: 0,
                        });
                    }
                }
                res.data.forEach((item) => {
                    sourcedatalist.forEach((it) => {
                        if (item.date == it["product"] && item.type == 2) {
                            it["案例区"] = item.count;
                        } else if (item.date == it["product"] && item.type == 3) {
                            it["成品区"] = item.count;
                        } else if (item.date == it["product"] && item.type == 4) {
                            it["素材区"] = item.count;
                        }
                    });
                });

                if (this.$refs.myChartvideo) {
                    let myChart = this.$echarts.init(this.$refs.myChartvideo);
                    var option;
                    option = {
                        legend: {
                            show: true,
                            // top: "bottom",
                            //  data: ['Range', 'Average']
                        },
                        tooltip: {},
                        dataset: {
                            dimensions: ["product", "案例区", "成品区", "素材区"],
                            source: sourcedatalist,
                        },
                        xAxis: {
                            type: "category",
                        },
                        yAxis: {},
                        // Declare several bar series, each will be mapped
                        // to a column of dataset.source by default.

                        series: [
                            {
                                type: "bar",
                            },
                            {
                                type: "bar",
                            },
                            {
                                type: "bar",
                            },
                        ],
                        // 统计表下方缩放
                        dataZoom: [
                            {
                                type: "slider", //图表下方的伸缩条
                                show: true, //是否显示
                                realtime: true, //拖动时，是否实时更新系列的视图
                                start: 0, //伸缩条开始位置（1-100），可以随时更改
                                end: 100, //伸缩条结束位置（1-100），可以随时更改
                            },
                        ],
                    };
                    option && myChart.setOption(option);
                }
            });
        },
        initmyCharttask() {
            homemonthdownload({
                date: this.date,
                objectType: this.objectType,
                type: this.type,
            }).then((res) => {
                let day = 0;
                if (this.date) {
                    if (this.date.split("-")[1].slice(0, 1) == "0") {
                        day = new Date(
                            this.date.split("-")[0],
                            this.date
                                .split("-")[1]
                                .substr(this.date.split("-")[1].length - 1, 1),
                            0
                        ).getDate();
                    } else {
                        day = new Date(
                            this.date.split("-")[0],
                            this.date.split("-")[1],
                            0
                        ).getDate();
                    }
                }
                let sourcedatalist = [];
                for (let i = 1; i <= day; i++) {
                    if (i < 10) {
                        sourcedatalist.push({
                            product: this.date + "-0" + i,
                            剪辑: 0,
                            拍摄: 0,
                        });
                    } else {
                        sourcedatalist.push({
                            product: this.date + "-" + i,
                            剪辑: 0,
                            拍摄: 0,
                        });
                    }
                }
                res.data.forEach((item) => {
                    sourcedatalist.forEach((it) => {
                        if (item.date == it["product"] && item.type == 20) {
                            it["拍摄"] = item.count;
                        } else if (item.date == it["product"] && item.type == 10) {
                            it["剪辑"] = item.count;
                        }
                    });
                });
                let myChart = this.$echarts.init(this.$refs.myCharttask);
                var option;
                option = {
                    legend: {
                        show: true,
                    },
                    tooltip: {},
                    dataset: {
                        dimensions: ["product", "剪辑", "拍摄"],
                        source: sourcedatalist,
                    },
                    xAxis: {
                        type: "category",
                    },
                    yAxis: {},

                    series: [
                        {
                            type: "bar",
                        },
                        {
                            type: "bar",
                        },
                    ],
                    // 统计表下方缩放
                    dataZoom: [
                        {
                            type: "slider", //图表下方的伸缩条
                            show: true, //是否显示
                            realtime: true, //拖动时，是否实时更新系列的视图
                            start: 0, //伸缩条开始位置（1-100），可以随时更改
                            end: 100, //伸缩条结束位置（1-100），可以随时更改
                        },
                    ],
                };
                option && myChart.setOption(option);
            });
        },
        initmyChartimg() {
            homemonthdownload({
                date: this.date,
                objectType: this.objectType,
                type: this.type,
            }).then((res) => {
                let day = 0;
                if (this.date) {
                    if (this.date.split("-")[1].slice(0, 1) == "0") {
                        day = new Date(
                            this.date.split("-")[0],
                            this.date
                                .split("-")[1]
                                .substr(this.date.split("-")[1].length - 1, 1),
                            0
                        ).getDate();
                    } else {
                        day = new Date(
                            this.date.split("-")[0],
                            this.date.split("-")[1],
                            0
                        ).getDate();
                    }
                }
                let sourcedatalist = [];
                for (let i = 1; i <= day; i++) {
                    if (i < 10) {
                        sourcedatalist.push({
                            product: this.date + "-0" + i,
                            案例区: 0,
                            成品区: 0,
                            素材区: 0,
                        });
                    } else {
                        sourcedatalist.push({
                            product: this.date + "-" + i,
                            案例区: 0,
                            成品区: 0,
                            素材区: 0,
                        });
                    }
                }
                res.data.forEach((item) => {
                    sourcedatalist.forEach((it) => {
                        if (item.date == it["product"] && item.type == 2) {
                            it["案例区"] = item.count;
                        } else if (item.date == it["product"] && item.type == 4) {
                            it["素材区"] = item.count;
                        } else if (item.date == it["product"] && item.type == 3) {
                            it["成品区"] = item.count;
                        }
                    });
                });

                if (this.$refs.myChartimg) {
                    let myChart = this.$echarts.init(this.$refs.myChartimg);
                    var option;
                    option = {
                        legend: {
                            show: true,
                            // top: "bottom",
                            //  data: ['Range', 'Average']
                        },
                        tooltip: {},
                        dataset: {
                            dimensions: ["product", "案例区", "成品区", "素材区"],
                            source: sourcedatalist,
                        },
                        xAxis: {
                            type: "category",
                        },
                        yAxis: {},
                        // Declare several bar series, each will be mapped
                        // to a column of dataset.source by default.
                        series: [
                            {
                                type: "bar",
                            },
                            {
                                type: "bar",
                            },
                            {
                                type: "bar",
                            },
                        ],
                        // 统计表下方缩放
                        dataZoom: [
                            {
                                type: "slider", //图表下方的伸缩条
                                show: true, //是否显示
                                realtime: true, //拖动时，是否实时更新系列的视图
                                start: 0, //伸缩条开始位置（1-100），可以随时更改
                                end: 100, //伸缩条结束位置（1-100），可以随时更改
                            },
                        ],
                    };
                    option && myChart.setOption(option);
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
// 头部内容
.header {
    width: 100%;
    min-width: 1200px;
    height: 35px;
    display: flex;
    padding-top: 8px;

    justify-content: space-around;
    background-color: rgb(84, 92, 100);

    .header-left {
        margin-top: -4px;
        margin-left: 87px;
        color: white;

        span {
            display: inline-block;
            margin-left: 10px;
            font-size: 28px;
            font-family: "Arial Negreta", "Arial Normal", Arial, sans-serif;
            font-weight: 700;
        }
    }

    .navBg {
        width: 120px;
        height: 41px;
        border-bottom: 1px solid rgb(255, 208, 75);
        border-bottom-color: rgb(255, 208, 75);

        a {
            color: rgb(255, 208, 75) !important;
        }
    }

    .header-nav {
        width: 787px;
        position: relative;
        top: -7px;
        // margin-top: 19px;
        margin-right: 458px;
    }

    .header-nav>div {
        width: 600px;
        display: flex;
        text-align: center;

        justify-content: center;

        div {
            width: 120px;
        }

        a {
            color: white;
            display: inline-block;
            padding-top: 4px;
            font-size: 18px;
            text-align: center;
            font-weight: 700;
            text-decoration: none;
        }
    }

    .header-login {
        width: 200px;
        margin-top: 3px;
        display: flex;
        justify-content: space-around;
    }

    .header-user {
        position: relative;
    }

    span {
        color: white;
        font-size: 14px;
        display: inline-block;
        margin-right: 10px;
    }

    img {
        position: absolute;
        top: 9px;
    }

    .header-out {
        span:hover {
            cursor: pointer;
        }
    }
}

// 中间内容
.all-main {}

.main {
    // background-color:black;
    display: flex;
    // justify-content: center;
}

.main-left {
    width: calc((100% - 25px) / 2);
    box-sizing: border-box;
    // position: absolute;
    // top: 0;
    // left: 24px;
    // margin-left: 30px;
    height: 128px;
    // padding-bottom: 35px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background-color: white;
    display: flex;
    margin-right: 25px;
    // padding-top: 14px;
    padding-left: 37px;
    border-radius: 10px;

    .mainnum {
        width: 223px;
        margin-top: 39px;
        margin-left: 3px;
        margin-right: 18px;

        p {
            margin-bottom: 8px;
            font-size: 20px;
            color: #4badff;
            font-weight: 700;
        }

        span {
            display: inline-block;
            width: 100px;
            font-size: 14px;
            margin-left: -2px;
        }
    }

    .line {
        margin-top: 15px;
    }

    .mainpic {
        margin-right: 30px;
        margin-top: 36px;
    }

    .source {
        width: 765px;
        margin: auto;
    }

    .num {
        display: flex;

        justify-content: space-around;
        align-items: center;
    }

    .top span {
        display: inline-block;
        margin-right: 8px;
        margin-left: 2px;
        font-weight: 700;
        font-size: 17px;
    }

    .pic {
        margin-top: 10px;
    }
}

.main-right {
    width: calc((100% - 50px) / 3);
    box-sizing: border-box;
    height: 128px;

    // position: absolute;
    // top: 0;
    // left: 859px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    // padding-bottom: 35px;
    background-color: white;
    display: flex;
    // padding-top: 14px;
    padding-left: 37px;
    border-radius: 10px;

    .mainnum {
        width: 223px;
        margin-top: 39px;
        margin-right: 18px;

        p {
            margin-bottom: 8px;
            font-size: 20px;

            color: #ffa54b;
            font-weight: 700;
        }

        span {
            display: inline-block;
            width: 100px;
            font-size: 14px;
            margin-left: -2px;
        }
    }

    .line {
        margin-top: 15px;
    }

    .mainpic {
        margin-top: 36px;
        margin-right: 30px;
    }

    .source {
        width: 700px;
        margin: auto;
    }

    .num {
        display: flex;
        // margin: 0 auto;

        justify-content: space-around;
        align-items: center;
    }

    .top span {
        display: inline-block;
        margin-right: 8px;
        margin-left: 2px;
        font-weight: 700;
        font-size: 17px;
    }

    .pic {
        margin-top: 10px;
    }
}

// 视频内容
.video-page {
    width: 100%;
    min-width: 1200px;

    margin-top: 20px;

    .video-main {
        width: 1478px;
        min-width: 1200px;
        display: flex;
        margin: 0 auto;

        .video-content-left {
            width: 1036px;
            background-color: white;
            border-radius: 15px;
            height: 697px;
            margin-right: 25px;

            .left-btn {
                width: 171px;
                display: flex;
                // flex-wrap: wrap;
                border: 1px solid #f7f5f6;
                background-color: #f7f5f6;
                border-radius: 17px;
                margin-left: 23px;

                div {
                    width: 84px;

                    height: 30px;
                    text-align: center;
                    background-color: #f7f5f6;

                    border-radius: 17px;
                }
            }

            .block {
                margin-right: 30px;

                .el-input__inner {
                    border-radius: 17px;
                }
            }

            .zhe {
                width: 800px;
                margin: 0 auto;
                height: 500px;
                background-color: white;
            }
        }

        .left-content {
            display: flex;
            justify-content: space-between;
            width: 1030px;
            // flex-wrap: wrap;

            .left-btn {
                width: 171px;
                display: flex;

                justify-content: space-around;

                div {
                    width: 84px;

                    height: 30px;
                    text-align: center;
                    background-color: #f7f5f6;

                    border-radius: 17px;
                }

                .asff {
                    width: 84px;
                    text-decoration: none;
                    color: #333;
                    display: inline-block;
                    margin-top: 6px;
                    text-align: center;
                    font-size: 13px;
                }
            }
        }

        .chartssecond {
            width: 1240px;
            margin: 0 auto;
        }

        .video-content-right {
            width: 418px;
            height: 697px;
            background-color: white;
            border-radius: 15px;

            .point-pic {
                display: flex;
                margin-left: 67px;
                margin-top: 24px;

                img {
                    display: block;
                    width: 20px;
                    height: 20px;
                    margin-right: 10px;
                }

                p {
                    font-size: 15.5px;
                }
            }

            .name {
                margin-top: 35px;

                table {
                    width: 386px;
                    margin: 0 auto;

                    tr {
                        width: 300px;
                        height: 33px;
                        line-height: 33px;

                        td {
                            width: 100px;
                            text-align: center;
                            font-size: 15px;
                        }
                    }

                    .name-one td {
                        color: #a3a6b4;
                        font-size: 14px;
                    }

                    .nine-point {
                        color: #409eff;
                        font-size: 15px;
                    }
                }
            }
        }
    }
}

//任务内容 统计表
.allconut {
    position: relative;
    margin-top: 20px;

    .allconut-content {
        display: flex;

        .allconut-left {
            width: calc(100% - 390px);
            height: calc(100vh - 270px);
            // height: 802px;
            //  height: calc(100vh - 495px);
            // margin-top: 50px;
            position: relative;
            // position: absolute;
            // top: 0;
            // right: 797px;
            background-color: white;
            padding: 30px;
            box-sizing: border-box;
            border-radius: 10px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

            .left-btn {
                // width: 171px;
                display: flex;
                // flex-wrap: wrap;
                border: 1px solid #f7f5f6;
                background-color: #f7f5f6;
                border-radius: 17px;

                height: 30px;
                // flex-wrap: wrap;

                div {
                    width: 84px;

                    height: 30px;
                    text-align: center;
                    background-color: #f7f5f6;

                    border-radius: 17px;
                }

                .asff {
                    width: 84px;
                    text-decoration: none;
                    color: #333;
                    display: inline-block;
                    margin-top: 6px;
                    text-align: center;
                    font-size: 13px;
                    cursor: pointer;
                }
            }
        }

        .left-top {
            position: relative;
            margin-top: 20px;

            .newMouth {
                width: 150px;

                p {
                    font-weight: bold;
                    font-size: 18px;
                }
            }

            .Statisticaltable {
                margin-top: 40px;

                .charts {
                    // width: 1420px;
                    // margin: 0 auto;
                    box-sizing: border-box;
                    // width: calc(100% - 390px);
                    // box-sizing: border-box;
                    //  margin: 0 auto;
                    // margin-left: 180px;
                    // margin-top: 20px;
                    // margin-left: 20px;
                    // overflow-x: scroll;
                }
            }
        }
    }
}

.data-tongji {
    position: absolute;
    top: 21px;
    z-index: 3;
    left: 410px;
}

// .block {
//   position: absolute;
// }
.data-all {
    margin-left: 23px;
    margin-bottom: 31px;
    margin-top: 26px;
    position: relative;

    img {
        margin-right: 10px;
    }

    span {
        display: inline-block;
        position: absolute;
        top: 0;
        color: #303541;
    }
}

// 积分排行榜
.all-point-right {
    width: 370px;
    // height: 802px;
    // height: 802px;
    padding-top: 30px;
    position: relative;
    box-sizing: border-box;
    // position: absolute;
    // left: 427px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-left: 20px;
}

.all-point-right .paihang {
    display: inline-block;
    position: absolute;
    top: 32px;
    right: 329px;
    // left: 22px;
}

.point-title {
    display: flex;
    justify-content: space-around;
    margin-top: 26px;
    margin-bottom: 19px;
}

.all-point-right p {
    text-align: left;
    margin-left: 48px;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
}

.title-top {
    width: 344px;
}

.right-title {
    width: 370px;

    // margin-left: 110px;
    .eri {
        width: 370px;
        height: calc(100vh - 410px);
        // overflow: scroll;
    }
}

.right-point-list {
    margin-left: 161px;
}

.right-point-list ul {
    width: 194px;
    list-style: none;
}

.right-point-list ul li {
    width: 150px;
    margin-bottom: 19px;
    font-size: 14px;
}

// .left-name {
//   margin-left: 19px;
// }

.right-title .eri {
    // width: 194px;
    list-style: none;
    position: relative;
    // margin: 0 auto;
}

.right-title ul li {
    // width: 150px;
    font-size: 14px;
    margin-bottom: 15px;
    height: 36px;
}

.right-title ul li>div {
    width: 261px;
    margin: 0 auto;
}

.right-title ul li img {
    margin-right: 8px;
}

.right-title .name {
    // color: red;
    display: inline-block;
    position: absolute;
    left: 163px;
}

.right-title .sort {
    margin-right: 8px;
    // color: red;
    display: inline-block;
}

.right-title .name2 {
    color: #ff5478;
    position: absolute;
    left: 293px;
}

.right-title h4 {
    font-size: 14px;
    color: #aaaaaa;
    font-weight: normal;
}

.allconut-right {
    width: 628px;
    margin-top: 25px;

    .name table {
        border: none;
    }

    .Order {
        text-align: center;

        p {
            font-size: 14px;
            font-weight: normal;
        }

        .seemore {
            margin-top: 40px;
            display: inline-block;
            text-decoration: none;
            color: #7f7f7f7f;

            font-size: 14px;
        }
    }
}

// 查看更多
.Order-more {
    padding-top: 46px;
    text-align: center;
}

// 任务
.istask {
    background-color: #ff5478 !important;
}

.istask span {
    color: white !important;
}
</style>
